<template>
    <div class="order">
      <div class="order-header">
        <div class="nowOrder" :class="order_active===0?'order-active':''" @click="changeTab(0)">当前订单</div>
        <div class="historyOrder" :class="order_active===1?'order-active':''" @click="changeTab(1)">历史订单</div>
      </div>
      <div v-if="order_active===0" class="order-content">
        <orderItem :status="true"></orderItem>
      </div>
      <div  v-if="order_active===1" class="history-content">
        <orderItem :status="false"></orderItem>
<!--        <div class="content-header" @click="$router.push('/orderDetail')">-->
<!--          <div class="header-left" >-->
<!--            <div class="title">美年广场GO店</div>-->
<!--            <div class="time">2020-10-22 16：19：20</div>-->
<!--          </div>-->
<!--          <div class="header-right">-->
<!--            <div class="complete">已取消</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="content-middle"  @click="$router.push('/orderDetail')">-->
<!--          <div class="middle-left">-->
<!--            <img src="../../assets/img/order/ice.png"/>-->
<!--            <img src="../../assets/img/order/drink.png"/>-->
<!--          </div>-->
<!--          <div class="middle-right">-->
<!--            <div class="price">￥ 48</div>-->
<!--            <div class="num">共 2 件</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="content-btn">-->
<!--          <div class="again" @click="$router.push('/food')">再来一单</div>-->
<!--        </div>-->
      </div>
      <div class="footer">没有更多了</div>
    </div>
</template>

<script>
  import {getOrderList} from 'network/index'
  import orderItem from './childCom/orderItem'
    export default {
        name: "order",
      components:{
        orderItem
      },
      data(){
          return{
            order_active:0
          }
      },
      created(){
        getOrderList({
          user_id:1
        }).then(res=>{
          console.log(res);
        }).catch(err=>{

        })
      },
      methods:{
          changeTab(index){
            this.order_active = index
          }
      }
    }
</script>

<style scoped>
.order{
  background-color: #f5f5f5;
  padding-bottom: 80px;
  height: 100vh;
}
.order-header{
  display: flex;
  height: 80px;
  background-color: #fff;
}
.order-header div{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.order-active{
  color: orange;
  border-bottom: 5px solid orange;
}
.order-content{
  margin-top: 20px;
}
.history-content{
  height: 250px;
  margin-top: 20px;
  background-color: #fff;
}
.content-header{
  height: 70px;
}
.content-header .header-left{
  margin-top: 30px;
  margin-left: 10px;
  float: left;
 }
.content-header .header-right{
  margin-top: 30px;
  margin-right:20px;
  float: right;
}
.content-header .header-left .title{
  font-size: 14px;
  color: #333333;
}
.content-header .header-left .time{
  font-size: 14px;
  color: #999999;
}
.content-header .header-right .complete{
  color: #999999;
}

.content-middle{
  height: 90px;
}
.content-middle .middle-left{
  float: left;
}
.content-middle .middle-left img{
  display: inline-block;
  width: 80px;
  height: 80px;
}
.content-middle .middle-right{
  float: right;
  margin-right: 15px;
  font-size: 16px;
}
.content-middle .middle-right .price{
  margin-top: 50px;
  color: #333333;
}
.content-middle .middle-right .num{
  color: #999999;
  font-size: 15px;
}
.content-btn{
  height: 30px;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}
.content-btn .invoice{
  text-align: center;
  line-height: 30px;
  padding: 0 15px;
  height: 30px;
  border: 1px solid skyblue;
  margin-right: 10px;
  margin-top: 20px;
  border-radius: 5px;
}
.content-btn .again{
  text-align: center;
  line-height: 30px;
  padding: 0 10px;
  height: 30px;
  border: 1px solid orange;
  color: orange;
  margin-top: 20px;
  border-radius: 5px;
}
.footer{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 50px;
}
</style>